<template>
  <div class="order-item">
    <img class="order-item__image" :src="item.photos" :alt="item.name" />
    <div class="order-item__details">
      <h2 class="order-item__name">
        {{ item.name }}
      </h2>
      <p class="order-item__shop">店铺：{{ businessName }}</p>
      <p class="order-item__price">价格：¥{{ item.price }}</p>
      <p class="order-item__quantity">数量：{{ item.num }}</p>
      <p class="order-item__all__price">
        总价：
        <span style="color: rgb(255, 112, 15)">￥{{ item.price * item.num }}</span>
      </p>
    </div>
  </div>
</template>

<script setup>
import { getBusinessName } from '@/api/goods'
import { ref } from 'vue'

const props = defineProps({
  item: Object
})

const item = props.item

const businessName = ref()

const getBusinessNameInfo = async () => {
  const res = (await getBusinessName(item.businessId)).data
  businessName.value = res.data
}

getBusinessNameInfo()
</script>

<style scoped>
.order-item {
  display: flex;
  align-items: center;
  padding: 16px;
  margin: 16px 0;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
  cursor: pointer;
}

.order-item:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.order-item__image {
  width: 102px;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 16px;
}

.order-item__details {
  flex: 1;
}

.order-item__name {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 8px;
  color: #333;
}

.order-item__shop,
.order-item__price,
.order-item__quantity {
  margin: 4px 0;
  color: #666;
}

.order-item__price {
  font-size: 16px;
  font-weight: bold;
  color: #e91e63;
}

.order-item__all__price {
  padding-left: 88%;
}
</style>
